<template>
  <div class="modal-from">
    <a-modal
      title="电网咨询单"
      :width="1000"
      style="top: 50px;"
      :visible="visible"
      :confirmLoading="confirmLoading"
      @ok="submit"
      @cancel="handleCancel"
    >
      <a-row :gutter="24">
        <a-col :md="3" :lg="8" :sm="24" >
          <a-form :form="form" layout="vertical" class="input-search">
            <a-form-item
              label="项目了解程度"
              :wrapperCol="wrapperCol"
              has-feedback
            >
                  <a-input
                ref="nameInput"
                placeholder="请输入项目了解程度"
                style="width: 300px"
                v-decorator="['name',{rules: [{ required: true, message: '请输入项目了解程度！' }]}]" />

            </a-form-item>
          </a-form>
        </a-col>

        <a-col :md="3" :lg="8" :sm="24" >
          <a-form :form="form" layout="vertical" class="input-search">
           

            <a-form-item
              label="刚需状态"
              :wrapperCol="wrapperCol"
              has-feedback
            >
               <a-select
                :showSearch="true"
                option-filter-prop="children"
                style="width: 300px"
                placeholder="请选择刚需状态,可直接搜索"
                v-decorator="['quoteItemList',{rules: [{ required: true, message: '请选择刚需状态！' }]}]"
                option-label-prop="label"
              >
                <a-select-option v-for="item in noData" :key="item.id" :label="item.name" :value="item.id" >{{ item.name }}</a-select-option>
              </a-select>
            </a-form-item>


          </a-form>
        </a-col>

        <a-col :md="3" :lg="8" :sm="24" >
          <a-form :form="form" layout="vertical" class="input-search">
            <a-form-item
              label="推荐项目"
              :wrapperCol="wrapperCol"
              
              has-feedback
            >
              <!-- <a-input
                style="width: 300px"
                placeholder="请填写推荐项目"
                v-decorator="['projectName', {rules: [{ required: false }]}]" /> -->
                
               
                 <a-cascader
                      style="width:300px"
                      allow-clear        
                      expand-trigger="hover"
                      :show-search="{ filter }"
                      :options="ConsultationAppeal"
                      v-model="testArr"
                      placeholder="可选择,搜索"
                  />
              


            </a-form-item>
          </a-form>
        </a-col>
      
      </a-row>
      <a-row :gutter="24">
        <a-col :md="3" :lg="8" :sm="24" >
          <a-form :form="form" layout="vertical" class="input-search">
            <a-form-item
              label="潜在项目"
              :wrapperCol="wrapperCol"
              has-feedback
            >
              <a-cascader
                      style="width:300px"
                      allow-clear        
                      expand-trigger="hover"
                      :show-search="{ filter }"
                      :options="ConsultationAppeal"
                      v-model="testArr"
                      placeholder="可选择,搜索"
                  />
            </a-form-item>
          </a-form>
        </a-col>

        <a-col :md="3" :lg="8" :sm="24" >
          <a-form :form="form" layout="vertical" class="input-search">
            <a-form-item
              label="推荐专家"
              :wrapperCol="wrapperCol"
              has-feedback
            >
             <a-select
                :showSearch="true"
                option-filter-prop="children"
                style="width: 300px"
                placeholder="请选择推荐专家,可直接搜索"
                v-decorator="['quoteItemList']"
                option-label-prop="label"
              >
                <a-select-option v-for="item in sysUserArr" :key="item.id" :label="item.name" :value="item.id" >{{ item.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-form>
        </a-col>

        <a-col :md="3" :lg="8" :sm="24" >
          <a-form :form="form" layout="vertical" class="input-search">
             <a-form-item
              label="关注活动"
              :wrapperCol="wrapperCol"
              has-feedback
            >
              <a-select
                allow-clear
                 style="width: 300px"
                placeholder="请选择受理类型"
                v-decorator="['activity_name']" >
                 <a-select-option v-for="item in activityList" :key="item.tb_activity_id"  :value="item.tb_activity_id" >{{item.activity_name}}</a-select-option>
              </a-select>
              

            </a-form-item>



          </a-form>
        </a-col>
      
      </a-row>
      <a-row :gutter="24">
        <a-col :md="3" :lg="8" :sm="24" >
          <a-form :form="form" layout="vertical" class="input-search">
            <a-form-item
              label="担心问题"
              :wrapperCol="wrapperCol"
              has-feedback
            >
             <a-select
                :showSearch="true"
                option-filter-prop="children"
                style="width: 300px"
                placeholder="请选择担心问题,可直接搜索"
                v-decorator="['quoteItemList']"
                option-label-prop="label"
              >
                <a-select-option v-for="item in noData" :key="item.id" :label="item.name" :value="item.id" >{{ item.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-form>
        </a-col>

        <!-- <a-col :md="3" :lg="8" :sm="24" >
          <a-form :form="form" layout="vertical" class="input-search">
            <a-form-item
              label="方案具体报价"
              :wrapperCol="wrapperCol"
              has-feedback
            >
              <a-input
                style="width: 300px"
                placeholder="请填写方案具体报价"
                v-decorator="['projectName', {rules: [{ required: false }]}]" />
            </a-form-item>
          </a-form>
        </a-col> -->

      
      
      </a-row>

       <a-row :gutter="24">
          <a-col :md="24" :lg="24" :sm="24" >
             <a-form :form="form" layout='vertical'>
                      <a-form-item
                        label="方案设计"
                        has-feedback
                      >
                        <a-textarea
                          :rows="4"
                          placeholder="请填写方案设计"
                          style="width: 100%"
                          :maxLength="100"
                          v-decorator="['scoutContent', {rules: [{ required: true, message: '请填写刚需状态！' }]}]"
                        >
                        </a-textarea>
                      </a-form-item>
                    </a-form>
          </a-col>
          
      </a-row>
    </a-modal>
  </div>

</template>

<script>
 
import {aboutActivity} from "@/api/customer/common"
import {
  getClientDemandName
} from '@/api/modular/main/customer/customerConsultation'
import {getZXS} from '@/api/modular/main/customer/customerTriage'
import moment from 'moment'

export default {
  data(){
    return{
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 15 }
      },
     
      confirmLoading: false,
      form: this.$form.createForm(this),
      customerTableLoading:false,
      visible:false,
      customerDetailsForm:{},

    // 客户诉求
      noData:[],
      ConsultationAppeal:[],
      activityList:[],
      sysUserArr:[],
      testArr:[]
   
    }
  },
  created() {
   
  },
  methods:{
     filter(inputValue, path) {
      return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)
    },
    moment,
    init(){
        aboutActivity().then(res=>{
          this.activityList=res.data
        })
        getClientDemandName().then(res => {
          this.ConsultationAppeal = res.rows     
        })
        getZXS().then(res=>{
          this.sysUserArr = res.userList
        })
    },
    submit(){},
    handleCancel(){
        this.form.resetFields()
        this.visible = false
    },
    add (customerDetailsForm) {

      this.init()
      this.customerDetailsForm=customerDetailsForm
      console.log(customerDetailsForm)
      this.visible = true
      this.confirmLoading = false
      this.$nextTick(()=>{

      })
    },
    
    
  }
}
</script>

<style lang="less" scoped>

</style>